<template>
	<cu-page-base :nav-bar-options="navBarOptions" @clickNavBarLeft="goBack">
		<view class="cu-w-100 cu-p-20">
			<view class="cu-w-100 cu-bg-main cu-pb-20 cu-border-r-20 cu-shadow">
				<u-sticky offset-top="200">
					<view class="cu-w-100 cu-bg-main">
						<u-tabs :list="voiceStore.voiceList" @change="changeFun" lineWidth="60" :current="voiceStore.selectIndex" lineHeight="16"
							:lineColor="'url(' + lineBg + ') 100% 100%'" :activeStyle="{
					           color: '#f56c6c',
					           fontWeight: 'bold',
					           transform: 'scale(1.05)'
					       }" :inactiveStyle="{
					           color: '#3e3e7e',
					           transform: 'scale(1)'
					       }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
						</u-tabs>
					</view>
				</u-sticky>
				<view class="cu-w-100">
					<block v-if="voiceStore.voiceList[voiceStore.selectIndex]
					 && voiceStore.voiceList[voiceStore.selectIndex].voices
					 && voiceStore.voiceList[voiceStore.selectIndex].voices.length === 0">
						<cu-empty icon="data" text="暂无数据"></cu-empty>
					</block>
					<block v-for="(item,index) in voiceStore.voiceList[voiceStore.selectIndex].voices">
						<view :key="index" v-if="index <= pageNum" class="cu-m-20 cu-p-20 cu-row cu-j-sb cu-a-center " style="border: 1px dotted #CCC;">
							<view @click="changeVoice(item)" class="cu-row cu-j-start cu-a-center">
								<view style="width: 45px;height: 45px;">
									<u--image :src="'/static/images/kf/kf' + item.imageType + '.png'" width="80"
										height="80" shape="circle"></u--image>
								</view>
								<view class="cu-d-flex cu-j-sb cu-flex-column">
									<view class="cu-font-lg cu-font-weight"><text
											class="cu-pr-20">{{item.name}}</text></view>
									<view class="cu-font-sm">
										<block v-for="(itemLabel,idx) in item.label">
											<text :key="idx" class="cu-px-20 cu-py-10 cu-border-r-10 cu-mr-10"
												:style="{backgroundColor: itemLabel.backgroundColor}">{{itemLabel.text}}</text>
										</block>
						
									</view>
								</view>
							</view>
							
							<block v-if="item.url && item.url.length > 1">
								<view @click="openSelectFun(index)" class="cu-row cu-text-right">
									<uni-icons :type="index === selectIndex ? 'bottom' : 'right'" size="30"></uni-icons>
								</view>
							</block>
							<block v-if="item.url && item.url.length === 1">
								<view class="cu-row cu-j-start cu-a-center">
									<view class="cu-px-20"></view>
									<view class="cu-py-10 cu-mr-10">
										<cu-audio :audioId="'audio' + item.id" :url="item.url[0].url" audioColor="#68d7bb"></cu-audio>
									</view>
								</view>
							</block>
							<block v-if="item.url && item.url.length > 1">
								<view class="cu-row cu-j-start cu-a-center"  :style="{
											display: index === selectIndex ? 'block!important' : 'none!important'
										}">
									<view class="cu-px-20"></view>
									<block v-if="item.url && item.url.length > 1">
										<view class="cu-py-10 cu-mr-10">
											<block v-for="(itemUrl,idx) in item.url">
												<text :key="idx">{{itemUrl.text}}</text><cu-audio :audioId="'audio'+idx" 
												:url="itemUrl.url" audioColor="#68d7bb"></cu-audio>
											</block>
										</view>
									</block>
									
								</view>
							</block>
							
						</view>
					</block>
					
				</view>
			</view>
		</view>
	</cu-page-base>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	import commMiXin from '@/common/mixin/common-mixin.js';
	export default {
		mixins: [commMiXin],
		computed: {
			...mapState({
				commonStore: state => state.commonStore,
				voiceStore: state => state.voiceStore,
			})
		},
		data() {
			return {
				lineBg: "",
				navBarOptions: {
					title: "选择配音员",
					leftText: "返回",
					leftIcon: "back",
				},
				// 多情感选择标识
				selectIndex: -1,
				// 展示数量
				pageNum:10,
				paseSize: 10
			};
		},
		onLoad() {
		},
		methods: {
			changeFun(e) {
				const {
					index
				} = e
				this.voiceStore.selectIndex = index
				this.selectIndex = -1
				this.pageNum = 10
			},
			changeVoice(data){
				if(data){
					this.$store.dispatch('voiceStore/changeVoice',{data});
					this.gotoPage(1, 'navigateBack');
				}
			},
			goBack(data) {
				this.gotoPage(1, 'navigateBack');
			},
			openSelectFun(index){
				if (this.selectIndex === index) {
					this.selectIndex = -1
				}
				else {
					this.selectIndex = index
				}
			},
			// 触底的事件
			onReachBottom() {
				this.pageNum += this.paseSize
			}
		}
	}
</script>

<style lang="scss">

</style>